<template>
    <div>
        <div
            v-if="!parent && showAll"
            :class="{active:isAll}"
            @click="selectAll"
        >全选</div>
        <div
            v-for="(item,i) of list"
            :key="item.id || i"
        >
            <div
                v-if="hasSel"
                @click="selectItem(item,i)"
                :class="{active:item.isSelected}"
            >
                {{'>'.repeat(layer)}} {{item.name}}
            </div>
            <CheckList
                v-if="childField"
                :list="item[childField]"
                :childFields="chidlFieldList"
                :showAll="false"
                :parent.sync="list[i]"
                :layer="layer+1"
            />
        </div>
    </div>

</template>

<script>
export default {
    name: 'CheckList',
    components: {},
    props: {
        showAll: {
            type: Boolean,
            default: true
        },
        hasSel: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default() {
                return []
            }
        },
        childFields: {
            type: Array,
            default() {
                return []
            }
        },
        parent: {
            type: Object,
            default: null
        },
        layer: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            isAll: false,
            chidlFieldList: [],
            chidlField: null
        };
    },
    created() {
        this.chidlFieldList = [...this.childFields]
        this.childField = this.chidlFieldList.shift()
    },
    methods: {
        selectAll() {
            this.isAll = !this.isAll
            this.list.forEach(v => {
                v.isSelected = this.isAll
                this.changChildsSelect(v, [...this.childFields], this.isAll)
            })
        },
        selectItem(item, i) {
            item.isSelected = !item.isSelected
            this.list.splice(i, 1, item)
            this.changChildsSelect(item, [...this.childFields], item.isSelected)
            this.changeParentSelect(this)
        },
        changChildsSelect(item, chidlFieldList, isSelected) {
            const childField = chidlFieldList.shift()
            if (!childField) return
            item[childField] = item[childField].map(v => {
                v.isSelected = isSelected
                this.changChildsSelect(v, [...chidlFieldList], isSelected)
                return v
            })
        },
        changeParentSelect(vm) {
            if (!vm.list) return
            const isAll = vm.list.every(v => v.isSelected)
            if (vm.parent) {
                vm.parent.isSelected = isAll
                vm.$emit('update:parent', vm.parent)
            } else {
                vm.isAll = isAll
            }
            this.changeParentSelect(vm.$parent)
        }
    }
};
</script>

<style>
.active {
    background-color: rgba(0, 0, 0, 0.5);
}
</style>
